【Qt5学习笔记】使用ui界面编一个入门级的小项目（保姆级教程，多图警告）

2023-09-18 19:51| 来源: 网络整理| 查看: 265

前言

我发现自己之前可能是有点走偏了，花了两天时间看书几乎一无所获，书上都是代码实现，还没有相应的注释… 今天我用ui设计师界面来进行编程，写一个小界面。

界面功能

1.计算加法； 2.可以弹窗； 3.使用布局，美化界面； 4.退出按钮；

界面预览

在这里插入图片描述

实现 1.建立一个Qt Widgets Application

可以参考QT5项目创建教程但要记得基类改为：mainwindow

2.添加新类

右键点击项目文件夹，添加一个ui界面在这里插入图片描述后续选择：完成后，右键单机项目文件，选择执行qmake;

3.ui设计

点开文件列表中的mainwindow.ui文件，进行如下设计：在这里插入图片描述具体步骤： 1.从左侧拖入三个label控件，双击控件将其分别命名为：first/second/result 2.单机其中一个label控件，在左下角找到objectName，在这里可以修改变量名（拿小本本记下来） 3.拖入三个LineEdit输入框，分别修改变量名为：lineEdit_first/lineEdit_second/lineEdit_result; 4.拖入三个按钮，分别双击控件改名为：show/quit/open apple，再分别改变量名为：pushButton_show/pushButton_quit/pushButton_apple; 5.下面就要进行布局了，布局主要有两个：垂直布局和水平布局，所在位置如下图：在这里插入图片描述第一个是水平布局，第二个是竖直布局，选中几个控件后再点击相应布局按钮就可以进行操作了，好了，布局你们自己来吧，如果不小心点错了，别怕！可以撤销的，作为保姆级教程，撤销操作也得说：对着自己误点的区域单机鼠标右键找到布局，点击后选择打破布局即可！

3.槽函数

听起来挺难吧蛤蛤蛤，我第一次看这个也是懵的，别怕！我给你讲清楚操作！

（1）.转到槽

在这里插入图片描述

（2）.选择信号

在这里插入图片描述选择clicked(); 请对quit按键和open apple按键重复以上操作

（3）.编辑函数

接下来请打开mainwindow.cpp文件，如果你确实按照之前上面所说的那样做了，那么你的mainwindow.cpp终究会出现三个空的函数：

void MainWindow::on_pushButton_quit_clicked() { } void MainWindow::on_pushButton_show_clicked() { } void MainWindow::on_pushButton_apple_clicked() { }

open apple 那个函数我们先不管。输入以下代码，代码其实挺好理解吧，但是我依旧在下面做了超详细的解释：在这里插入图片描述

void MainWindow::on_pushButton_quit_clicked() { close();//退出界面 } void MainWindow::on_pushButton_show_clicked() { int first, second, sum; first=ui->lineEdit_first->text().toInt();//text()是输入文本，但是是字符串类型的，所以要加一个toInt()来进行类型转换 second=ui->lineEdit_second->text().toInt();//同理 sum=first+second; ui->lineEdit_result->setText(QString::number(sum));//在result中进行输出，并将输出转化为字符串 }

现在其实已经可以运行了，只差个弹出窗口功能；

4.弹出窗口

之前我们不是新建了一个apple.ui么？现在在mainwindow.h中加上一个#include 头文件，再给下面的private：中加一个apple类型的指针；

private: Ui::MainWindow *ui; apple *a;

随后设计apple的ui，随便拖个label写个hellow都行。然后在mainwindow.cpp的open apple按钮的那个函数中写：

void MainWindow::on_pushButton_apple_clicked() { a=new apple; a->show();//显示 }

就ok啦！！！！点击open apple就会有弹出窗口咯~ 成果就是博客开头那个，感谢您的观看，我们下期再见~~~

【本文地址】

公司简介

联系我们